<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<!-- Apple Fullscreen -->
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
	
	<!-- Favicon -->
	<link rel="shortcut icon" href="img/favicon.ico" />
	<!-- Icone Homescreen para Apple -->
	<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png" />
	<title>SISTEMA AGENDAMENTO</title>

	<!-- CSS -->	
	<link rel="stylesheet" href="css/bootstrap.css">										<!-- Bootstrap -->
	<link rel="stylesheet" href="css/bootstrap-responsive.css">								<!-- Bootstrap responsive -->
	<link rel="stylesheet" href="css/plugins/jquery-ui/smoothness/jquery-ui.css">			<!-- jQuery UI -->
	<link rel="stylesheet" href="css/plugins/jquery-ui/smoothness/jquery.ui.theme.css">		<!-- jQuery UI -->
	<link rel="stylesheet" href="css/plugins/gritter/jquery.gritter.css">					<!-- Notify -->
	<link rel="stylesheet" href="css/plugins/datatable/TableTools.css">						<!-- dataTables -->
	<link rel="stylesheet" href="css/plugins/chosen/chosen.css">							<!-- chosen -->
	
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/themes.css">


	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>
	
	<!-- Nice Scroll -->
	<script src="js/plugins/nicescroll/jquery.nicescroll.min.js"></script>
	<!-- jQuery UI -->
	<script src="js/plugins/jquery-ui/jquery.ui.core.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.widget.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.mouse.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.resizable.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.sortable.min.js"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.datepicker.min.js"></script>
	<script src="js/plugins/jquery-ui/i18n/datepicker-pt-BR.js"></script>
	<!-- slimScroll -->
	<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<!-- Notify -->
	<script src="js/plugins/gritter/jquery.gritter.min.js"></script>
	
	<!-- Bootstrap -->
	<script src="js/bootstrap.js"></script>
	<!-- dataTables -->
	<script src="js/plugins/datatable/jquery.dataTables.min.js"></script>
	<script src="js/plugins/datatable/jquery.dataTables.columnFilter.js"></script>
	<script src="js/plugins/datatable/jquery.dataTables.grouping.js"></script>
	
	<!-- Plugin: Validation -->
	<script src="js/plugins/validation/jquery.validate.min.js"></script>
	<script src="js/plugins/validation/additional-methods.min.js"></script>
	<!-- Chosen -->
	<script src="js/plugins/chosen/chosen.jquery.min.js"></script>
	<!-- Masked inputs -->
	<script src="js/plugins/maskedinput/jquery.maskedinput.min.js"></script>

	
	<!-- Theme scripts -->
	<script src="js/application.js"></script>

	
	<!--[if lte IE 9]>
		<script src="js/plugins/placeholder/jquery.placeholder.min.js"></script>
		<script>
			$(document).ready(function() {
				$('input, textarea').placeholder();
			});
		</script>
	<![endif]-->
	
</head>


<body class="sidebar-right" data-layout-sidebar="fixed" data-layout-topbar="fixed">
	
	<div id="navigation">
		<div class="container-fluid">
			<a href="index.html" id="brand">AGENDA</a>
			<ul class='main-nav'>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Chamados</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="#">Listar Requisições</a>
						</li>
						<li>
							<a href="#">Novo Chamado</a>
						</li>
						<li>
							<a href="#">Listar Chamados</a>
						</li>
						<li>
							<a href="#">Buscar Chamado</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Clientes</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="clients-add.html">Novo Cliente</a>
						</li>
						<li>
							<a href="clients-list.html">Listar Clientes</a>
						</li>
						<li>
							<a href="clients-search.html">Buscar Cliente</a>
						</li>
					</ul>
				</li>
				
				<li>
					<a href="#">
						<span>Agenda</span>
					</a>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Servi&ccedil;os</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="#">Novo Servi&ccedil;o</a>
						</li>
						<li>
							<a href="#">Listar Servi&ccedil;os</a>
						</li>
						<li>
							<a href="#">Buscar Servi&ccedil;o</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Produtos</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="product-add.html">Novo Produto</a>
						</li>
						<li>
							<a href="products-list.html">Listar Produtos</a>
						</li>
						<li>
							<a href="forms-validation.html">Buscar Produto</a>
						</li>
						<li>
							<a href="categorias-add.html">Nova Categoria</a>
						</li>
						<li>
							<a href="categorias-list.html">Listar Categorias</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Configura&ccedil;&otilde;es do Sistema</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="profile-list.php">Perfis de Usu&aacute;rio</a>
						</li>
						<li class='dropdown-submenu'>
							<a href="#" data-toggle="dropdown" class='dropdown-toggle'>Usu&aacute;rios</a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">Novo Usu&aacute;rio</a>
								</li>
								<li>
									<a href="#">Listar Usu&aacute;rios</a>
								</li>
								<li>
									<a href="#">Buscar Usu&aacute;rio</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
			<div class="user">
				<div class="dropdown">
					<a href="#" class='dropdown-toggle' data-toggle="dropdown">Administrador <img src="img/application-images/icon-user.png" alt=""></a>
					<ul class="dropdown-menu pull-right">
						<li>
							<a href="#">Minha Conta</a>
						</li>
						<li>
							<a href="login.html">Sair</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid" id="content">
		<div id="left" class='no-resize'>

			<div class="subnav">
				<div class="subnav-content less">
					<div class="jq-datepicker"></div>
				</div>
			</div>
<!-- 			<div class="subnav"> -->
				
<!-- 				<div class="subnav-title"> -->
<!-- 					<a href="#" class='toggle-subnav'><i class="icon-angle-down"></i><span>Titulo</span></a> -->
<!-- 				</div> -->
<!-- 				<ul class="subnav-menu"> -->
<!-- 					<li class='dropdown'> -->
<!-- 						<a href="#" data-toggle="dropdown">Link 1</a> -->
<!-- 						<ul class="dropdown-menu"> -->
<!-- 							<li> -->
<!-- 								<a href="#">SubLink 1</a> -->
<!-- 							</li> -->
<!-- 							<li> -->
<!-- 								<a href="#">SubLink 2</a> -->
<!-- 							</li> -->
<!-- 						</ul> -->
<!-- 					</li> -->
<!-- 					<li> -->
<!-- 						<a href="#">Link 2</a> -->
<!-- 					</li> -->
<!-- 					<li> -->
<!-- 						<a href="#">Link 3</a> -->
<!-- 					</li> -->
<!-- 					<li> -->
<!-- 						<a href="#">Link 4</a> -->
<!-- 					</li> -->
<!-- 				</ul> -->
<!-- 			</div> -->
		</div>

	<div id="main">
		<div class="container-fluid">
			<div class="page-header">
				<div class="pull-left">
					<h1>Chamados</h1>
				</div>
			</div>
			<hr />
			<div class="row-fluid">
				<div class="span12">
					<div class="box">
						<div class="box-title">
							<h3>
								<i class="icon-tags"></i>
								Adicionar Novo Chamado
							</h3>
							<a href="categorias-list.php" class="btn btn-primary pull-right"><i class="icon-double-angle-left"></i> Voltar</a>
						</div>
						<div class="box-content">
							<form action="#" method="POST" class='form-horizontal form-validate' id="chamados-add">
								<div class="control-group">
									<label for="textfield" class="control-label">Categoria:</label>
									<div class="controls">
										<input type="text" name="txt-categoria" id="txt-categoria" class="input-xlarge" data-rule-required="true" />
									</div>
								</div>
								<div class="form-actions">
									<button type="button" class="btn">Cancel</button>
									<input type="submit" class="btn btn-primary" value="Salvar">
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


<script type="text/javascript">

	$(document).ready(function(){
		document.getElementById("txt-categoria").focus();

		$('.form-validate').each(function(){
			var id = $(this).attr('id');
			$("#"+id).validate({
				errorElement:'span',
				errorClass: 'help-block error',
				errorPlacement:function(error, element){
					element.parents('.controls').append(error);
				},
				highlight: function(label) {
					$(label).closest('.control-group').removeClass('error success').addClass('error');
				},
				success: function(label) {
					label.addClass('valid').closest('.control-group').removeClass('error success').addClass('success');
				}
			});
		});
	});
	
</script>


	</div>
</body>

</html>

